<template>
  <!-- 目标完成情况 -->
  <div style="width: 2500px">
    <s-table
      bordered
      ref="table"
      :page-keys="['pageNum', 'pageSize']"
      tableLayout="fixed"
      rowKey="key"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
      show-size-changer
      show-quick-jumper
      :showPagination="false"
    >
      <template slot="haveRank" slot-scope="text, record">
        <span v-if="record.haveRank == null">-</span>
        <a-switch v-else disabled v-model="record.haveRank" />
      </template>
      <template slot="auditStatus" slot-scope="text, record">
        <list-status :status="record.auditStatus" :isApproval="true" conversion="en" :text="text"></list-status>
      </template>
    </s-table>
  </div>
</template>

<script>
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import { api } from '@/api/project/performanceAnalysis'
import { sorter, formatText } from './model.js'
export default {
  name: 'screenTable',
  extends: new BaseEditPage(),

  data() {
    return {
      loading: false, // 是否加载中
      keyrateVO: {},
      loadData: () => {
        return api.getLvyueCompany({ id: this.$route.query.id }).then((res) => {
          this.keyrateVO = res.data?.keyrateVO
          let list = res.data?.keyrateVO?.keyrateDTOList
          this.handleMerge(list)
          return {
            code: 200,
            data: list
          }
        })
      },
      columns: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '分公司',
          dataIndex: 'branchCompanyName',
          align: 'center',
          customRender: (text, record) => {
            let obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = record.rowSpan || (record.rowSpan === 0 ? 0 : 1)
            obj.attrs.colSpan = record.colSpan || 1
            return obj
          }
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          customRender: (text, record) => {
            let obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.colSpan = record.branchCompanyName === record.projectName ? 0 : 1
            return obj
          }
        },
        {
          title: '是否重点项目',
          dataIndex: 'keyProgram',
          customRender() {
            return arguments[0] ? arguments[0] : '-'
          }
        },
        {
          title: '工期滞后天数',
          dataIndex: 'lagNum',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2, type) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'lagNum', type)
          }
        },
        {
          title: '业主确认工期天数',
          dataIndex: 'confirmNum',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'confirmNum')
          }
        },
        {
          title: '工期履约率（%）',
          dataIndex: 'periodRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'periodRate')
          }
        },
        {
          title: '合同外工期确认率',
          dataIndex: 'contractOtherRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'contractOtherRate')
          }
        },
        {
          title: '合同额（亿元）',
          dataIndex: 'contractAmount',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'contractAmount')
          }
        },
        {
          title: '开工累计确认产值（亿元）',
          dataIndex: 'startAllOutputTotal',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'startAllOutputTotal')
          }
        },
        {
          title: '开工累计产值完成率',
          dataIndex: 'startAllOutputRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'startAllOutputRate')
          }
        },
        {
          title: '年度累计计划产值（万元）',
          dataIndex: 'yearOutputPlanTotal',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'yearOutputPlanTotal')
          }
        },
        {
          title: '年度累计确权产值（万元）',
          dataIndex: 'yearOutputConfirmTotal',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'yearOutputConfirmTotal')
          }
        },
        {
          title: '产值完成率',
          dataIndex: 'completionRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'completionRate')
          }
        },
        {
          title: '人均产值(万元)',
          dataIndex: 'completionPre',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'completionPre')
          }
        },
        {
          title: '一级节点按时完成率',
          dataIndex: 'firstNodeRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'firstNodeRate')
          }
        },
        {
          title: '二级节点按时完成率',
          dataIndex: 'secondNodeRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'secondNodeRate')
          }
        },
        {
          title: '三级节点按时完成率',
          dataIndex: 'thirdNodeRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'thirdNodeRate')
          }
        },
        {
          title: '节点按时完成率平均值',
          dataIndex: 'nodeAvgRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'nodeAvgRate')
          }
        },
        {
          title: '实名制出勤率',
          dataIndex: 'realnameRate',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'realnameRate')
          }
        },
        {
          title: '顾客满意度',
          dataIndex: 'satisfaction',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'satisfaction')
          }
        },
        {
          title: '投诉',
          dataIndex: 'complaint',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'complaint')
          }
        },
        {
          title: '综合得分',
          dataIndex: 'totalScore',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'totalScore')
          }
        },
        {
          title: '综合排名',
          dataIndex: 'name',
          customRender() {
            return formatText(...arguments)
          },
          sorter: (data1, data2) => {
            data2.rowSpan = 1
            return sorter(data1, data2, 'name')
          }
        },
        {
          title: '是否参加排名',
          dataIndex: 'haveRank',
          scopedSlots: { customRender: 'haveRank' }
        },
        {
          title: '状态',
          dataIndex: 'auditStatusStr'
        }
      ]
    }
  },
  methods: {
    /**
     * @description: 合并列表
     * @param {*} list：需要合并的列表
     */
    handleMerge(list) {
      list?.forEach((item, index) => {
        item.key = index
        // 合并分公司相同的行
        if (item.branchCompanyName !== list[index - 1]?.branchCompanyName && item.branchCompanyName === list[index + 1]?.branchCompanyName) {
          item.rowSpan = list.filter((i) => i.branchCompanyName === item.branchCompanyName).length
        } else if (item.branchCompanyName === list[index - 1]?.branchCompanyName) {
          item.rowSpan = 0
        }
        // 合并项目和分公司相同的列
        if (item.projectName === item.branchCompanyName) {
          item.colSpan = 2
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.center {
  text-align: center;
  display: inline-block;
  width: 100%;
}
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;

    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }

  .remark {
    .ant-input {
      border-color: inherit !important;
      background-color: initial !important;
    }
  }
}
</style>